import React from 'react'
import { Drawer, Tree,Icon,Button ,Input,Row, Col} from "antd";
import { Select } from 'antd';
import {FormattedMessage} from "../../utils/locale";
import MyDeviceTypeSelect from "../../components/MyDeviceTypeSelect";
const {TreeNode} = Tree;
const { Search } = Input;


const { Option } = Select;

class DeviceList extends React.Component {
    constructor(props) {
        super(props);
        this.copy = React.createRef();
        this.state={
            selectedKeys: [],
            checkedKeys:[],
            expandedKeys:['1'],
            isTrail:false,
            copyText:'',
            demoId:[],
            sortRule:1
        }
    }
    copyDeviceId=(id)=>{
        // console.log(this.copy.current)
        // var Url2 = this.copy.current;
        // Url2.select(); // 选择对象
        // document.execCommand("Copy"); // 执行浏览器复制命令
    };
    
    sortChange=(value)=>{
        this.setState({
            sortRule:value
        })
    };
    renderTreeNodes = (data,sortRule) => {
        const {checkedKeys,mileage}=this.props;
        // const {sortRule}=this.state;
        data.forEach(function (item) {
            var id=item.device_id+'';
            if(mileage[id]===0){
                item.mileage=0;
            }else{
                item.mileage=mileage[id]||-1;
            }
            item.device_name=item.device_name||''
        });
        if(sortRule=='1'){
            data.sort(function (p,n) {
                if(p.mileage>n.mileage){
                    return -1;
                }else if(p.mileage===n.mileage){
                    if(p.device_name>n.device_name){
                        return -1
                    }else{
                        return 1;
                    }
                }else {
                    return 1
                }
            });
        }else if(sortRule==='2'){
            data.sort(function (p,n) {
                if(p.device_name>n.device_name){
                    return -1;
                }else if(p.device_name===n.device_name){
                    if(parseInt(p.device_id)>parseInt(n.device_id)){
                        return -1
                    }else{
                        return 1
                    }
                }else {
                    return 1
                }
            });
        }

        const that=this;
        return data.map(function (val,idx) {
            const index = checkedKeys.includes(val.device_name);
            const name=val.device_name;
            const device_id=val.device_id;
            const mileage=val.mileage;
            const title =
                index ? (
                    name?(<span style={{ "fontSize":"18px","fontWeight":'bolder'}} title={`查看${name}id:${device_id}`} ref='TreeNode'>{name}</span>):
                        <span style={{ "fontSize":"18px","fontWeight":'bolder'}} title={`查看${device_id}`} ref='TreeNode'>{device_id}</span>
                ) : (
                    name?( <span style={{ "fontSize":"16px"}} title={`查看${name}id:${device_id}`} ref='TreeNode'>{name}</span>):
                    <span style={{ "fontSize":"16px"}} title={`查看${device_id}`} ref='TreeNode'>{device_id}</span>
                );

           return <TreeNode
                   key={device_id}
                   isLeaf={true}
                   icon={<Icon type="tag" style={{color:that.props.getRandomLineColor(val.device_id)}} title={'复制id'} onClick={that.copyDeviceId.bind(that,device_id)}/>}
                   title={title}
                />

        })
   };
  render() {
    const {deviceIdList, checkedKeys, onCheck,onSelect, onVisible, visible,clearCheckKeys,isTrail,onChange} = this.props;

    return (
      <Drawer
        title={<div>
          {/*<FormattedMessage*/}
          {/*  id="app.map.device-list"*/}
          {/*/>*/}
          {/*  <MyDeviceTypeSelect/>*/}
            <Select defaultValue="1" style={{ width: 120 }} onChange={this.sortChange}>
                <Option value="1">里程排序</Option>
                <Option value="2">名称排序</Option>
            </Select>
        </div>
        }
        mask={false}
        placement="left"
        width={300}
        closable={true}
        onClose={onVisible}
        visible={visible}
      >

          <Row>
              <Col span={8}>  <Button type="primary" onClick={clearCheckKeys} disabled={!isTrail}  ref='Button'>全不选</Button></Col>
              <Col span={16}>  <Search style={{ marginBottom: 8 }} placeholder="设备筛选" onChange={onChange} /></Col>
              <input type="text" value={this.copyText} style={{display:'none'}} ref={this.copy}/>
          </Row>
          <Tree
              showIcon
              checkable//是否可以多选
              // expandedKeys={this.state.expandedKeys}
              onCheck={onCheck}
              checkedKeys={checkedKeys}
              onSelect={onSelect}
              selectedKeys={this.selectedKeys}
          >
              {/*<TreeNode title='全不选' key={1}>*/}
          {this.renderTreeNodes(deviceIdList,this.state.sortRule)}
              {/*</TreeNode>*/}
          </Tree>
      </Drawer>
    )
  }
}


export default DeviceList;
